<!DOCTYPE html>
<html style="height: 100%">
<head>
    <meta charset="utf-8">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/5.1.2/echarts.min.js"></script>
</head>
<body style="height: 100%; margin: 0">
    <div id="main" style="height: 100%"></div>
    <script type="text/javascript">
        var chartDom = document.getElementById('main');
        var myChart = echarts.init(chartDom);
        var option;

        option = {
            series: [
                {
                    type: 'gauge',
                    startAngle: 90,
                    endAngle: -270,
                    pointer: {
                        show: false
                    },
                    progress: {
                        show: true,
                        overlap: false,
                        roundCap: true,
                        clip: false,
                        itemStyle: {
                            color: '#4CAF50'
                        }
                    },
                    axisLine: {
                        lineStyle: {
                            width: 20
                        }
                    },
                    splitLine: {
                        length: 20,
                        lineStyle: {
                            width: 2,
                            color: 'auto'
                        }
                    },
                    axisTick: {
                        splitNumber: 10,
                        length: 10,
                        lineStyle: {
                            color: 'auto'
                        }
                    },
                    axisLabel: {
                        show: false
                    },
                    data: [
                        {
                            value: 50,
                            name: '解決率',
                            title: {
                                offsetCenter: ['0%', '-30%']
                            },
                            detail: {
                                valueAnimation: true,
                                formatter: '{value}%',
                                offsetCenter: ['0%', '0%']
                            }
                        }
                    ],
                    title: {
                        fontSize: 14
                    },
                    detail: {
                        fontSize: 20,
                        offsetCenter: ['0%', '10%']
                    }
                }
            ],
            color: [
                {
                    offset: 0, color: 'red'  // 12点钟位置
                },
                {
                    offset: 0.25, color: 'red'  // 3点钟位置
                },
                {
                    offset: 0.75, color: 'red'  // 9点钟位置
                },
                {
                    offset: 1, color: 'blue'  // 其他位置
                }
            ]
        };

        option && myChart.setOption(option);
    </script>
</body>
</html>
